<template>
  <div>
    <el-container>
      <el-aside width="200px" class="aside">
        <el-tree
          :data="data"
          :props="defaultProps"
          node-key="id"
          :default-expanded-keys="['1024982867475820033','1024984540818568481']"
          :current-node-key="activeID"
          :highlight-current="true"
          style="font-size:50px"
          icon-class="el-icon-circle-plus-outline"
          @node-click="handleNodeClick"
        />

      </el-aside>
      <el-container>
        <el-header class="header">
          <h3>作业范围</h3>
          <el-button v-if="judge" style="background-color:#e15536;color:white;height:40px;margin-right:50px" @click="judge=false">编辑</el-button>
          <div v-else-if="!judge" style="margin-right:50px">
            <el-button style="background-color:#e15536;color:white;height:40px" @click="submit">提交</el-button>
            <el-button style="background-color:#e15536;color:white;height:40px" @click="submit">取消</el-button>
          </div>

        </el-header>
        <el-main class="main">
          <label>地区关键词：<input v-model="keyword" placeholder="请输入地区关键词" style="width:300px;height:50px;margin:20px 0"></label>
          <div v-if="!judge">
            <button v-if="judge1" style="background-color:#e15536;color:white;height:40px;border:none" @click="edit">开始绘制</button>
            <div v-if="!judge1">
              <button style="background-color:#e15536;color:white;height:40px;border:none;margin-right:10px" @click="finished">完成绘制</button>
              <button style="background-color:#e15536;color:white;height:40px;border:none" @click="finished">删除围栏</button>
            </div>
          </div>

          <baidu-map class="bm-view" :center="center" :zoom="10" :scroll-wheel-zoom="true">
            <bm-local-search :auto-viewport="true" :keyword="keyword" />
            <bm-polygon :path="polygonPath" stroke-color="blue" fill-color="#f2c8c5" :stroke-opacity="0.5" :stroke-weight="1" stroke-style="dashed" :editing="editing" />
          </baidu-map>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getManageTree, getManageDetail, getBusinessScope } from '@/api/manager'
// 封装修改属性名的函数
function batchRenameProperties(arr, oldPropertyNames, newPropertyNames) {
  return arr.map(obj => {
    const updatedObj = {}

    for (let i = 0; i < oldPropertyNames.length; i++) {
      const oldPropName = oldPropertyNames[i]
      const newPropName = newPropertyNames[i]

      // eslint-disable-next-line no-prototype-builtins
      if (obj.hasOwnProperty(oldPropName)) {
        updatedObj[newPropName] = obj[oldPropName]
      } else {
        updatedObj[oldPropName] = obj[oldPropName]
      }
    }

    return updatedObj
  })
}
export default {
  data() {
    return {
      judge1: true,
      editing: false,
      judge: true,
      keyword: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      activeID: '1024985257948084801',
      form: {
        data: ''
      },
      center: { lng: 0, lat: 0 },
      polygonPath: []
    }
  },
  async created() {
    const res = await getManageTree()
    const data = JSON.parse(res)
    this.data = data

    const result = await getBusinessScope(this.activeID, 1)
    this.center.lng = result.longitude
    this.center.lat = result.latitude
    this.polygonPath = result.polygon
    const oldPropertyNames = ['latitude', 'longitude']
    const newPropertyNames = ['lat', 'lng']
    this.polygonPath = batchRenameProperties(this.polygonPath, oldPropertyNames, newPropertyNames)
  },
  methods: {
    async handleNodeClick(e) {
      const res = await getManageDetail(e.id)

      this.center.lng = res.longitude
      this.center.lat = res.latitude
      const result = await getBusinessScope(e.id, 1)
      this.polygonPath = result.polygon
      const oldPropertyNames = ['latitude', 'longitude']
      const newPropertyNames = ['lat', 'lng']
      this.polygonPath = batchRenameProperties(this.polygonPath, oldPropertyNames, newPropertyNames)
    },
    edit() {
      this.judge1 = false
      this.editing = true
    },
    finished() {
      this.judge1 = true
      this.editing = false
    },
    submit() {
      this.judge = true
      this.editing = false
    }
  }
}
</script>
<style scoped>
.aside{
  margin: 0 20px;
  background-color: #fff;
  height: 803px;
}
::v-deep .el-tree-node__label{
  font-size: 16px;
}
::v-deep .el-tree-node__content{
  margin-top: 20px;
}
.header{
  background-color: #f8faff;
  display: flex;
  justify-content: space-between;
  height: 60px;
  align-items: center;
}
.main{
  background-color: #fff;
}
.bm-view{
  width: 100%;
  height: 100%;
}
</style>
